<template>
  <div class="goods-counter">
      购买个数：<input type="number" name="total" :value="getCartGoodsCount" min="1" :max="maxCount" disabled />
      <div class="adjust">
        <span class="up-adjust" @click="increment(maxCount)">∧</span>
        <span class="down-adjust" @click="decrement">∨</span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Counter',
  props: {
    'maxCount': {
      type: Number,
      required: true
    },
    'increment': {
      type: Function,
      required: true
    },
    'decrement': {
      type: Function,
      required: true
    },
    'getCartGoodsCount': {
      type: Number,
      required: true
    }
  }
}
</script>

<style lang='scss'>
  .goods-counter{
    font-size: 13px;
    display: flex;
    justify-content: center;
    input[name='total']{
      width: 30px;
      font-size: 17px;
      height: 20px;
    }
    .adjust{
        margin-left: 4px;
        display: flex;
        flex-direction: column;
        span{
          font-weight: 600;
          display: block;
          width: 20px;
          height: 10px;
          line-height: 10px;
          border: 1px solid gray;
          &.down-adjust{
            margin-top: 2px;
          }
        }
    }
  }
</style>
